<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				{{title}}
				<!-- 好友申请 -->
			</view>
			<view class="head_right">
				<!-- 发送 -->
			</view>
		</view>
		<view class="body_top">
			你需要发送验证申请，等待对方通过
		</view>
		<view class="body_item">
			<input class="" type="text" value="" placeholder="输入验证消息" :value="inputClearValue" @input="bindClearInput" />
			<image src="../../../static/index/delete.png" mode="" v-if="showClearIcon" @click="clearIcon"></image>
		</view>
		<view class="btn" @tap="applyAddFriend">
			发送
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js'
	export default {
		data() {
			return {
				showClearIcon: false,
				inputClearValue: "",
				option: {},
				title: '',
				type: '',
			};
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			// 			console.log(option.item); //打印出上个页面传递的参数。
			// 			console.log(option.identifier); //打印出上个页面传递的参数。
			if (option.type == 'friend') {
				this.title = '添加好友'
			} else if (option.type == 'group') {
				this.title = '群组申请'
			}
			this.type = option.type
			this.option = option
			// console.log(JSON.stringify(option) + '传递的参数')
			// 			console.log(option.item); //打印出上个页面传递的参数。
			// 			console.log(option.identifier);
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindClearInput: function(e) { //判断输入框有无值
				this.inputClearValue = e.target.value;
				if (e.target.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon: function() { //清除输入框
				this.inputClearValue = "";
				this.showClearIcon = false;
			},
			//申请加好友
			applyAddFriend() {
				var that = this
				// console.log(this.type);
				if (this.type == 'friend') {
					// console.log(111)
					var a = this.option.item
					var b = this.option.identifier
					console.log(a, b, this.inputClearValue)
					console.log(b + 'b')
					var add_friend_item = [{
						'To_Account': a,
						"AddSource": "AddSource_Type_Unknow",
						"AddWording": this.inputClearValue //加好友附言，可为空
					}];
					var options = {
						'From_Account': b,
						'AddFriendItem': add_friend_item
					};
					webim.applyAddFriend(
						options,
						function(resp) {
							that.back()
							uni.showToast({
								title: '申请好友请求成功',
								icon: 'none'
							})
						},
						function(err) {
							console.log(JSON.stringify(err) + "申请失败");
							uni.showToast({
								title:'申请失败',
								icon:'none'
							})
						}
					);
				} else if (this.type == 'group') {
					console.log(222)
					var options = {
						'GroupId': this.option.item,
						'ApplyMsg': this.inputClearValue,
						'UserDefinedField': ''
					};
					// console.log(111)
					webim.applyJoinGroup(
						options,
						function(resp) {
							console.log(11)
							console.log(resp, '加群结果')
							var joinedStatus = resp.JoinedStatus; //JoinedSuccess--成功加入，WaitAdminApproval--等待管理员审核
							if (joinedStatus == "JoinedSuccess") {
								uni.showToast({
									title: "申请成功，等待群主回应。",
									icon: 'none'
								})

							} else {
								uni.showToast({
									title: "申请成功",
									icon: 'none'
								})
							}
							uni.navigateTo({
								url: `/pages/Friend/groupTalk/groupTalk`
							})
						},
						function(err) {
							if (err.ErrorCode == 10013) {
								uni.showToast({
									title: "申请失败,你已经是该群成员",
									icon: 'none'
								})
							}
							console.log(err)
						}
					);
				}
			}
		},
	}
</script>

<style scoped>
	.head {
		height: 162upx;
		display: flex;
		justify-content: space-between;
		font-size: 32upx;
		padding: 0 24upx;
		background: #ffffff;
	}

	.head image {
		height: 36upx;
		width: 20upx;
		margin-right: 9upx;
	}

	.head_left {
		display: flex;
		align-items: center;
		color: #666666;
		padding-top: 70upx;
	}

	.head_mid {
		font-size: 36upx;
		color: #333333;
		padding-top: 90upx;
	}

	.head_right {
		color: #46CECF;
		padding-top: 66upx;
		width: 92upx;
	}

	.body_top {
		color: #999999;
		font-size: 24upx;
		padding: 20upx 24upx;
	}

	.body_item {
		width: 100%;
		background: #FFFFFF;
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.body_item image {
		width: 28upx;
		height: 28upx;
		padding-right: 24upx;
	}

	.body_item input {
		padding: 14upx 24upx;
		width: 700upx;
	}

	.btn {
		margin-top: 180upx;
	}
</style>
